---
type: tutorial
title: 再利用可能なナビゲーションコンポーネントを作成する
description: |-
  「初めてのAstroブログ」チュートリアル -
  複数のページで繰り返される要素を、再利用可能なコンポーネントに置き換える
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


Astroサイトの複数のページに同じHTMLが書かれているので、重複したコンテンツを再利用可能なAstroコンポーネントに置き換えましょう！

<PreCheck>
  - コンポーネント用の新しいフォルダを作成する
  - ナビゲーションリンクを表示するAstroコンポーネントを作成する
  - 既存のHTMLを再利用可能な新しいナビゲーションコンポーネントに置き換える
</PreCheck>

## `src/components/`フォルダを作成する

HTMLを生成するものの新しいページにはならないような`.astro`ファイルを保持するために、プロジェクトに`src/components/`という新しいフォルダが必要になります。


## ナビゲーションコンポーネントを作成する

<Steps>
1. `src/components/Navigation.astro`という新しいファイルを作成します。

2. 各ページの上部にあるページ間を移動するためのリンクをコピーして、新しいファイル`Navigation.astro`に貼り付けます。

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>
    ```
    :::tip
    `.astro`ファイルのフロントマターの中身がない場合は、コードフェンスを書かなくても構いません。必要になってからいつでも追加できます。
    :::
</Steps>

### Navigation.astroをインポートして使用する

<Steps>
1. `index.astro`に戻り、コードフェンスの中で新しいコンポーネントをインポートします。

    ```astro title="src/pages/index.astro"
    ---
    import Navigation from '../components/Navigation.astro';
    ---
    ```

2. 続いて、下部にある既存のナビゲーション用HTMLリンク要素を、先ほどインポートした新しいナビゲーションコンポーネントに置き換えます。

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>
    <Navigation />
    ```

3. ブラウザでプレビューを確認すると、以前とまったく同じに見えるはずです。それで問題ありません！
</Steps>

サイトには以前と同じHTMLが含まれています。しかし、この3行のコードは、現在は`<Navigation />`コンポーネントによって提供されているのです。

<Box icon="puzzle-piece">

## やってみよう - サイトの残りのページにナビゲーションを追加する

同じ方法により、サイトの他の2つのページ（`about.astro`と`blog.astro`）で`<Navigation />`コンポーネントをインポートして使用してみましょう。

以下を忘れないでください。
- コードフェンスの中のコンポーネントスクリプト上部に、インポート文を追加します。
- 既存のコードをナビゲーションコンポーネントに置き換えます。

</Box>

:::note
ブラウザ上のページの見た目を変えずにコードの構造を変更することを**リファクタリング**と呼びます。このユニットでは、ページのHTMLの一部をコンポーネントに置き換えることで、何度もリファクタリングをおこないます。

これにより、動作しているもののプロジェクト全体にわたって重複しているコードを使って素早く開始できます。こうして、サイトの外観を変更することなく、既存のコードの設計を段階的に改善できます。
:::



<Box icon="question-mark">

### 確認テスト



1. 複数のページで同じ要素が繰り返し使用されている場合、何が可能ですか？
    <MultipleChoice>
      <Option>
        開発サーバーを再起動する
      </Option>
      <Option isCorrect>
        再利用可能なコンポーネントを使用するようにリファクタリングする
      </Option>
      <Option>
        新しいページを作成する
      </Option>
    </MultipleChoice>

2. Astroコンポーネントに関する記述として正しいものはどれですか？
    <MultipleChoice>
      <Option>
        再利用できる
      </Option>
      <Option>
        HTMLの断片である
      </Option>
      <Option isCorrect>
        上の両方とも正しい！
      </Option>
    </MultipleChoice>

3. Astroコンポーネントがサイトに新しいページを自動的に作成するのは、どのような場合ですか？
    <MultipleChoice>
      <Option>
        `<html></html>`を含んでいる場合
      </Option>
      <Option>
        リファクタリングした場合
      </Option>
      <Option isCorrect>
        `.astro`ファイルを`src/pages/`内に配置した場合
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## チェックリスト

<Checklist>
- [ ] コンテンツを再利用可能なコンポーネントにリファクタリングできる。
- [ ] `.astro`ページに新しいコンポーネントを追加できる。
</Checklist>

</Box>

### 参考 

- [Astroコンポーネントの概要](/ja/basics/astro-components/)

- [Refactoring](https://refactoring.com/) <Badge>外部サイト</Badge>
